<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网易云音乐</title>
  <link rel="icon" href="//s1.music.126.net/style/favicon.ico?v20180823">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/header.css">
  <link rel="stylesheet" href="./css/swiper.css">
  <link rel="stylesheet" href="./css/main.css">
  <link rel="stylesheet" href="./css/main-header.css">
  <link rel="stylesheet" href="./css/song-list.css">
  <link rel="stylesheet" href="./css/new-disc.css">
  <link rel="stylesheet" href="./css/top-list.css">
  <link rel="stylesheet" href="./css/footer.css">
  <link rel="stylesheet" href="./css/playbar.css">
</head>
<body>
  <div class="header">
    <div class="header-top wrapper_01">
      <div class="header-left">
        <h1 class="logo"><a href="#">网易云音乐</a></h1>
        <ul class="header-list">
          <li><a href="#" class="item active">发现音乐
            <i class="top-arrow"></i>
          </a></li>
          <li><a href="#" class="item">我的音乐</a></li>
          <li><a href="#" class="item">关注</a></li>
          <li><a href="#" class="item">商城</a></li>
          <li><a href="#" class="item">音乐人</a></li>
          <li>
            <a href="#" class="item download">下载客户端
              <i class="hot"></i>
            </a>
          </li>
        </ul>
      </div>
      <div class="header-right">
        <div class="search">
          <i class="search_icon"></i>
          <input type="text" placeholder="音乐/视频/电台/用户">
        </div>
        <a class="creater" href="https://music.163.com/#/login?targetUrl=%2Fcreatorcenter" target="_blank">创作者中心</a>
        <a class="login" href="#">登录</a>
      </div>
    </div>
  </div>
  <div class="header-bottom">
    <ul class="header-bottom-list wrapper_01">
      <li><a href="#" class="item"><span>推荐</span></a></li>
      <li><a href="#" class="item"><span>排行榜</span></a></li>
      <li><a href="#" class="item"><span class="song-list">歌单
        <i class="r-icon"></i>
      </span></a></li>
      <li><a href="#" class="item"><span>主播电台</span></a></li>
      <li><a href="#" class="item"><span>歌手</span></a></li>
      <li><a href="#" class="item"><span>新碟上架</span></a></li>
    </ul>
  </div>
  <div class="swiper">
    <div class="swiper-img wrapper_02">
      <i class="arrow left-arrow"></i>
      <i class="arrow right-arrow"></i>
      <a href="#"><img src="http://p1.music.126.net/5W5OIdW2hGvsclocbHDRqA==/109951167291187304.jpg?imageView&quality=89" alt="swiper-img"></a>
      <div class="right-download">
        <span class="download-text">PC 安卓 iPhone WP iPad Mac 六大客户端</span>
        <a class="download-icon" href="https://music.163.com/#/download">下载客户端</a>
      </div>
    </div>
  </div>
  <div class="main wrapper_02">
    <div class="main-left">
      <div class="header-type-01">
        <a href="#" class="hot-recommend">热门推荐</a>
        <div class="hot-list">
          <ul class="header-list">
            <li>
              <a class="list-item" href="#">华语</a>
              <span class="line">|</span>
            </li>
            <li>
              <a class="list-item" href="#">流行</a>
              <span class="line">|</span>
            </li>
            <li>
              <a class="list-item" href="#">摇滚</a>
              <span class="line">|</span>
            </li>
            <li>
              <a class="item" href="#">民谣</a>
              <span class="line">|</span>
            </li>
            <li>
              <a class="list-item" href="#">电子</a>
            </li>
          </ul>
          <span class="more">
            <a class="list-item" href="#">更多</a>
            <i class="more-arrow"></i>
          </span>
        </div>
      </div>
      <ul class="song-list">
        <li class="item">
          <div class="song-cover">
            <img src="http://p2.music.126.net/8elXLFvOfgXE42Rb27YM8g==/109951167303130042.jpg?param=140y140" alt="" style="width: 140px;">
            <a class="cover" title="一个健身女孩的{跑步歌单}" href="#"></a>
            <div class="cover-bottom">
              <div class="info">
                <span class="icon-music"></span>
                <span class="play-count">279万</span>
              </div>
              <a class="icon-play" href="#"></a>
            </div>
          </div>
          <p>
            <a class="desc" title="一个健身女孩的{跑步歌单}" href="#">一个健身女孩的{跑步歌单}</a>
          </p>
        </li>
        <li class="item">
          <div class="song-cover">
            <img src="https://p2.music.126.net/aIleU3o-I0G_hoFXT0AY2A==/109951165873338742.jpg?param=140y140" alt="" style="width: 140px;">
            <a class="cover" title="
            【超好听的DJ歌曲】极致电音嗨起来！" href="#"></a>
            <div class="cover-bottom">
              <div class="info">
                <span class="icon-music"></span>
                <span class="play-count">68万</span>
              </div>
              <a class="icon-play" href="#"></a>
            </div>
          </div>
          <p>
            <a class="desc" title="
            【超好听的DJ歌曲】极致电音嗨起来！" href="#">
            【超好听的DJ歌曲】极致电音嗨起来！</a>
          </p>
        </li>
        <li class="item">
          <div class="song-cover">
            <img src="https://p2.music.126.net/O7rzcGcI5VmE2BWxuJYrlg==/109951164605001138.jpg?param=140y140" alt="" style="width: 140px;">
            <a class="cover" title="【纯音乐】温柔治愈系纯音乐" href="#"></a>
            <div class="cover-bottom">
              <div class="info">
                <span class="icon-music"></span>
                <span class="play-count">3553万</span>
              </div>
              <a class="icon-play" href="#"></a>
            </div>
          </div>
          <p>
            <a class="desc" title="【纯音乐】温柔治愈系纯音乐" href="#">【纯音乐】温柔治愈系纯音乐</a>
          </p>
        </li>
        <li class="item">
          <div class="song-cover">
            <img src="https://p1.music.126.net/oPRtBUCLmUOsWP8OuAwUFQ==/109951166950013912.jpg?param=140y140" alt="">
            <a class="cover" title="莫非留声机-《夏天的风》" href="#"></a>
            <div class="cover-bottom">
              <div class="info">
                <span class="icon-music"></span>
                <span class="play-count">2178</span>
              </div>
              <a class="icon-play" href="#"></a>
            </div>
          </div>
          <p>
            <a class="desc" title="莫非留声机-《夏天的风》" href="#">莫非留声机-《夏天的风》</a>
          </p>
        </li>
        <li class="item">
          <div class="song-cover">
            <img src="https://p1.music.126.net/fm9PpQauWBT8Dq9mCy0gEw==/109951166697010578.jpg?param=140y140" alt="">
            <a class="cover" title="『提升记忆力』莫扎特钢琴曲（亲测有效）" href="#"></a>
            <div class="cover-bottom">
              <div class="info">
                <span class="icon-music"></span>
                <span class="play-count">178万</span>
              </div>
              <a class="icon-play" href="#"></a>
            </div>
          </div>
          <p>
            <a class="desc" title="『提升记忆力』莫扎特钢琴曲（亲测有效）" href="#">『提升记忆力』莫扎特钢琴曲（亲测有效）</a>
          </p>
        </li>
        <li class="item">
          <div class="song-cover">
            <img src="https://p1.music.126.net/-Q7vXXpSpPGMYQ3tXp6nWw==/109951167107381491.jpg?param=140y140" alt="">
            <a class="cover" title="嫡女二嫁后想开了 第001集 我乃嫡妻改最新" href="#"></a>
            <div class="cover-bottom">
              <div class="info">
                <span class="icon-music"></span>
                <span class="play-count">3052</span>
              </div>
              <a class="icon-play" href="#"></a>
            </div>
          </div>
          <p>
            <a class="desc" title="嫡女二嫁后想开了 第001集 我乃嫡妻改最新" href="#">嫡女二嫁后想开了 第001集 我乃嫡妻改最新</a>
          </p>
        </li>
        <li class="item">
          <div class="song-cover">
            <img src="https://p1.music.126.net/iHbKrvHFfHb1y3Osu9EnPQ==/109951166726930602.jpg?param=140y140" alt="">
            <a class="cover" title="“其实无论怎么选择，都会有遗憾的对吧”" href="#"></a>
            <div class="cover-bottom">
              <div class="info">
                <span class="icon-music"></span>
                <span class="play-count">29万</span>
              </div>
              <a class="icon-play" href="#"></a>
            </div>
          </div>
          <p>
            <a class="desc" title="“其实无论怎么选择，都会有遗憾的对吧”" href="#">“其实无论怎么选择，都会有遗憾的对吧”</a>
          </p>
        </li>
        <li class="item">
          <div class="song-cover">
            <img src="https://p1.music.126.net/YNeQqmw5S7ldWVGrFcrGbw==/109951167137825892.jpg?param=140y140" alt="">
            <a class="cover" title="【白噪音】夜幕下的篝火畔-点点火星灿漫" href="#"></a>
            <div class="cover-bottom">
              <div class="info">
                <span class="icon-music"></span>
                <span class="play-count">119万</span>
              </div>
              <a class="icon-play" href="#"></a>
            </div>
          </div>
          <p>
            <a class="desc" title="【白噪音】夜幕下的篝火畔-点点火星灿漫" href="#">【白噪音】夜幕下的篝火畔-点点火星灿漫</a>
          </p>
        </li>
      </ul>
      <div class="header-type-01">
        <div class="hot-list">
          <a href="#" class="hot-recommend">新碟上架</a>
          <span class="more">
            <a class="list-item" href="#">更多</a>
            <i class="more-arrow"></i>
          </span>
        </div>
      </div>
      <div class="new-disc">
        <div class="disc-inner">
          <i class="disc-arrow-left arrow"></i>
          <ul class="disc-list">
            <li class="disc-item" title="That's Hilarious">
              <div class="disc-item-img">
                <img src="https://p4.music.126.net/f14-HwWhNg6uvGZ1OFnLYw==/109951167248049595.jpg?param=100y100" alt="">
                <a class="cover" href="#"></a>
                <a class="hover-icon" href="#"></a>
              </div>
              <a class="song-name">That's Hilarious</a>
              <a class="singer">Charlie Puth</a>
            </li>
            <li class="disc-item" title="酒">
              <div class="disc-item-img">
                <img src="https://p3.music.126.net/mLHGJRxGOTcy4EG6p7qhHg==/109951167210839465.jpg?param=100y100" alt="">
                <a class="cover" href="#"></a>
                <a class="hover-icon" href="#"></a>
              </div>
              <a class="song-name">酒</a>
              <a class="singer">张艺兴</a>
            </li>
            <li class="disc-item" title="LINK">
              <div class="disc-item-img">
                <img src="https://p4.music.126.net/W5qklsOwVwD_ILJpnCKLsA==/109951167208044048.jpg?param=100y100" alt="">
                <a class="cover" href="#"></a>
                <a class="hover-icon" href="#"></a>
              </div>
              <a class="song-name">LINK</a>
              <a class="singer">黄丽玲</a>
            </li>
            <li class="disc-item" title="Familia">
              <div class="disc-item-img">
                <img src="https://p3.music.126.net/pYW7qRUQJdCuuQYDEbAJ5A==/109951167255456460.jpg?param=100y100" alt="">
                <a class="cover" href="#"></a>
                <a class="hover-icon" href="#"></a>
              </div>
              <a class="song-name">Familia</a>
              <a class="singer">Camila Cabello</a>
            </li>
            <li class="disc-item" title="HELLO">
              <div class="disc-item-img">
                <img src="https://p3.music.126.net/un-liEMAOG1r5SVJX8GT8g==/109951167186158722.jpg?param=100y100" alt="">
                <a class="cover" href="#"></a>
                <a class="hover-icon" href="#"></a>
              </div>
              <a class="song-name">HELLO</a>
              <a class="singer">中島美嘉</a>
            </li>
          </ul>
          <i class="disc-arrow-right arrow"></i>
        </div>
      </div>
      <div class="header-type-01">
        <div class="hot-list">
          <a href="#" class="hot-recommend">榜单</a>
          <span class="more">
            <a class="list-item" href="#">更多</a>
            <i class="more-arrow"></i>
          </span>
        </div>
      </div>
      <div class="top-list">
        <dl class="list-item">
          <dt class="list-item-header">
            <div class="item-header-img" title="飙升榜">
              <img src="https://p3.music.126.net/pcYHpMkdC69VVvWiynNklA==/109951166952713766.jpg?param=100y100" alt="">
              <a href=""></a>
            </div>
            <div class="item-title">
              <a href="">
                <h3>飙升榜</h3>
              </a>
              <div class="item-header-icon">
                <a class="play icon" href=""></a>
                <a class="add icon" href=""></a>
              </div>
            </div>

          </dt>
          <dd class="list-item-desc">
            <ol>
              <li>
                <span class="rank rank-three">1</span>
                <a class="song-name" href="" title="梁山伯与茱丽叶">梁山伯与茱丽叶</a>
                <div class="hover-icon">
                  <i class="play icon"></i>
                  <i class="add icon"></i>
                  <i class="collect icon"></i>
                </div>
              </li>
              <li>
                <span class="rank rank-three">2</span>
                <a class="song-name" href="" title="梁山伯与茱丽叶">梁山伯与茱丽叶</a>
                <div class="hover-icon">
                  <i class="play icon"></i>
                  <i class="add icon"></i>
                  <i class="collect icon"></i>
                </div>
              </li>
              <li>
                <span class="rank rank-three">3</span>
                <a class="song-name" href="" title="梁山伯与茱丽叶">梁山伯与茱丽叶</a>
                <div class="hover-icon">
                  <i class="play icon"></i>
                  <i class="add icon"></i>
                  <i class="collect icon"></i>
                </div>
              </li>
              <li>
                <span class="rank">4</span>
                <a class="song-name" href="" title="梁山伯与茱丽叶">梁山伯与茱丽叶</a>
                <div class="hover-icon">
                  <i class="play icon"></i>
                  <i class="add icon"></i>
                  <i class="collect icon"></i>
                </div>
              </li>
              <li>
                <span class="rank">5</span>
                <a class="song-name" href="" title="梁山伯与茱丽叶">梁山伯与茱丽叶</a>
                <div class="hover-icon">
                  <i class="play icon"></i>
                  <i class="add icon"></i>
                  <i class="collect icon"></i>
                </div>
              </li>
              <li>
                <span class="rank">6</span>
                <a class="song-name" href="" title="梁山伯与茱丽叶">梁山伯与茱丽叶</a>
                <div class="hover-icon">
                  <i class="play icon"></i>
                  <i class="add icon"></i>
                  <i class="collect icon"></i>
                </div>
              </li>
              <li>
                <span class="rank">7</span>
                <a class="song-name" href="" title="梁山伯与茱丽叶">梁山伯与茱丽叶</a>
                <div class="hover-icon">
                  <i class="play icon"></i>
                  <i class="add icon"></i>
                  <i class="collect icon"></i>
                </div>
              </li>
              <li>
                <span class="rank">8</span>
                <a class="song-name" href="" title="梁山伯与茱丽叶">梁山伯与茱丽叶</a>
                <div class="hover-icon">
                  <i class="play icon"></i>
                  <i class="add icon"></i>
                  <i class="collect icon"></i>
                </div>
              </li>
              <li>
                <span class="rank">9</span>
                <a class="song-name" href="" title="梁山伯与茱丽叶">梁山伯与茱丽叶</a>
                <div class="hover-icon">
                  <i class="play icon"></i>
                  <i class="add icon"></i>
                  <i class="collect icon"></i>
                </div>
              </li>
              <li>
                <span class="rank">10</span>
                <a class="song-name" href="" title="梁山伯与茱丽叶">梁山伯与茱丽叶</a>
                <div class="hover-icon">
                  <i class="play icon"></i>
                  <i class="add icon"></i>
                  <i class="collect icon"></i>
                </div>
              </li>
            </ol>
            <div class="more">
              查看更多>
            </div>
          </dd>
        </dl>
        <dl class="list-item">
          <dt class="list-item-header">
            <div class="item-header-img" title="飙升榜">
              <img src="https://p3.music.126.net/pcYHpMkdC69VVvWiynNklA==/109951166952713766.jpg?param=100y100" alt="">
              <a href=""></a>
            </div>
            <div class="item-title">
              <a href="">
                <h3>飙升榜</h3>
              </a>
              <div class="item-header-icon">
                <a class="play icon" href=""></a>
                <a class="add icon" href=""></a>
              </div>
            </div>

          </dt>
          <dd class="list-item-desc">
            <ol>
              <li>
                <span class="rank rank-three">1</span>
                <a class="song-name" href="" title="梁山伯与茱丽叶">梁山伯与茱丽叶</a>
                <div class="hover-icon">
                  <i class="play icon"></i>
                  <i class="add icon"></i>
                  <i class="collect icon"></i>
                </div>
              </li>
              <li>
                <span class="rank rank-three">2</span>
                <a class="song-name" href="" title="梁山伯与茱丽叶">梁山伯与茱丽叶</a>
                <div class="hover-icon">
                  <i class="play icon"></i>
                  <i class="add icon"></i>
                  <i class="collect icon"></i>
                </div>
              </li>
              <li>
                <span class="rank rank-three">3</span>
                <a class="song-name" href="" title="梁山伯与茱丽叶">梁山伯与茱丽叶</a>
                <div class="hover-icon">
                  <i class="play icon"></i>
                  <i class="add icon"></i>
                  <i class="collect icon"></i>
                </div>
              </li>
              <li>
                <span class="rank">4</span>
                <a class="song-name" href="" title="梁山伯与茱丽叶">梁山伯与茱丽叶</a>
                <div class="hover-icon">
                  <i class="play icon"></i>
                  <i class="add icon"></i>
                  <i class="collect icon"></i>
                </div>
              </li>
              <li>
                <span class="rank">5</span>
                <a class="song-name" href="" title="梁山伯与茱丽叶">梁山伯与茱丽叶</a>
                <div class="hover-icon">
                  <i class="play icon"></i>
                  <i class="add icon"></i>
                  <i class="collect icon"></i>
                </div>
              </li>
              <li>
                <span class="rank">6</span>
                <a class="song-name" href="" title="梁山伯与茱丽叶">梁山伯与茱丽叶</a>
                <div class="hover-icon">
                  <i class="play icon"></i>
                  <i class="add icon"></i>
                  <i class="collect icon"></i>
                </div>
              </li>
              <li>
                <span class="rank">7</span>
                <a class="song-name" href="" title="梁山伯与茱丽叶">梁山伯与茱丽叶</a>
                <div class="hover-icon">
                  <i class="play icon"></i>
                  <i class="add icon"></i>
                  <i class="collect icon"></i>
                </div>
              </li>
              <li>
                <span class="rank">8</span>
                <a class="song-name" href="" title="梁山伯与茱丽叶">梁山伯与茱丽叶</a>
                <div class="hover-icon">
                  <i class="play icon"></i>
                  <i class="add icon"></i>
                  <i class="collect icon"></i>
                </div>
              </li>
              <li>
                <span class="rank">9</span>
                <a class="song-name" href="" title="梁山伯与茱丽叶">梁山伯与茱丽叶</a>
                <div class="hover-icon">
                  <i class="play icon"></i>
                  <i class="add icon"></i>
                  <i class="collect icon"></i>
                </div>
              </li>
              <li>
                <span class="rank">10</span>
                <a class="song-name" href="" title="梁山伯与茱丽叶">梁山伯与茱丽叶</a>
                <div class="hover-icon">
                  <i class="play icon"></i>
                  <i class="add icon"></i>
                  <i class="collect icon"></i>
                </div>
              </li>
            </ol>
            <div class="more">
              查看更多>
            </div>
          </dd>
        </dl>
        <dl class="list-item">
          <dt class="list-item-header">
            <div class="item-header-img" title="飙升榜">
              <img src="https://p3.music.126.net/pcYHpMkdC69VVvWiynNklA==/109951166952713766.jpg?param=100y100" alt="">
              <a href=""></a>
            </div>
            <div class="item-title">
              <a href="">
                <h3>飙升榜</h3>
              </a>
              <div class="item-header-icon">
                <a class="play icon" href=""></a>
                <a class="add icon" href=""></a>
              </div>
            </div>

          </dt>
          <dd class="list-item-desc">
            <ol>
              <li>
                <span class="rank rank-three">1</span>
                <a class="song-name" href="" title="梁山伯与茱丽叶">梁山伯与茱丽叶</a>
                <div class="hover-icon">
                  <i class="play icon"></i>
                  <i class="add icon"></i>
                  <i class="collect icon"></i>
                </div>
              </li>
              <li>
                <span class="rank rank-three">2</span>
                <a class="song-name" href="" title="梁山伯与茱丽叶">梁山伯与茱丽叶</a>
                <div class="hover-icon">
                  <i class="play icon"></i>
                  <i class="add icon"></i>
                  <i class="collect icon"></i>
                </div>
              </li>
              <li>
                <span class="rank rank-three">3</span>
                <a class="song-name" href="" title="梁山伯与茱丽叶">梁山伯与茱丽叶</a>
                <div class="hover-icon">
                  <i class="play icon"></i>
                  <i class="add icon"></i>
                  <i class="collect icon"></i>
                </div>
              </li>
              <li>
                <span class="rank">4</span>
                <a class="song-name" href="" title="梁山伯与茱丽叶">梁山伯与茱丽叶</a>
                <div class="hover-icon">
                  <i class="play icon"></i>
                  <i class="add icon"></i>
                  <i class="collect icon"></i>
                </div>
              </li>
              <li>
                <span class="rank">5</span>
                <a class="song-name" href="" title="梁山伯与茱丽叶">梁山伯与茱丽叶</a>
                <div class="hover-icon">
                  <i class="play icon"></i>
                  <i class="add icon"></i>
                  <i class="collect icon"></i>
                </div>
              </li>
              <li>
                <span class="rank">6</span>
                <a class="song-name" href="" title="梁山伯与茱丽叶">梁山伯与茱丽叶</a>
                <div class="hover-icon">
                  <i class="play icon"></i>
                  <i class="add icon"></i>
                  <i class="collect icon"></i>
                </div>
              </li>
              <li>
                <span class="rank">7</span>
                <a class="song-name" href="" title="梁山伯与茱丽叶">梁山伯与茱丽叶</a>
                <div class="hover-icon">
                  <i class="play icon"></i>
                  <i class="add icon"></i>
                  <i class="collect icon"></i>
                </div>
              </li>
              <li>
                <span class="rank">8</span>
                <a class="song-name" href="" title="梁山伯与茱丽叶">梁山伯与茱丽叶</a>
                <div class="hover-icon">
                  <i class="play icon"></i>
                  <i class="add icon"></i>
                  <i class="collect icon"></i>
                </div>
              </li>
              <li>
                <span class="rank">9</span>
                <a class="song-name" href="" title="梁山伯与茱丽叶">梁山伯与茱丽叶</a>
                <div class="hover-icon">
                  <i class="play icon"></i>
                  <i class="add icon"></i>
                  <i class="collect icon"></i>
                </div>
              </li>
              <li>
                <span class="rank">10</span>
                <a class="song-name" href="" title="梁山伯与茱丽叶">梁山伯与茱丽叶</a>
                <div class="hover-icon">
                  <i class="play icon"></i>
                  <i class="add icon"></i>
                  <i class="collect icon"></i>
                </div>
              </li>
            </ol>
            <div class="more">
              查看更多>
            </div>
          </dd>
        </dl>
      </div>
    </div>
    <div class="main-right">
      <div class="user-login">
        <p>登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p>
        <a href="#" class="login-btn">用户登录</a>
      </div>
      <div class="settle-singer">
        <div class="singer-header">
          <span>入驻歌手</span>
          <a href="#">查看全部 ></a>
        </div>
        <ul class="singer-list">
          <li>
            <a href="#">
              <img src="https://p2.music.126.net/rCsLFXha6SLis0tV7yZ5fA==/109951165588539704.jpg?param=62y62" alt="">
              <div class="info">
                <h4 class="name">张惠妹aMEI</h4>
                <span class="desc">台湾歌手张惠妹</span>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="https://p2.music.126.net/wDxCsT3YEYdNg-UZU_ZKeg==/109951166047225823.jpg?param=62y62" alt="">
              <div class="info">
                <h4 class="name">Fine乐团</h4>
                <span class="desc">独立音乐人</span>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="https://p2.music.126.net/TiRAIiIihOgtBgYB6DZRXA==/109951162916034289.jpg?param=62y62" alt="">
              <div class="info">
                <h4 class="name">萬曉利</h4>
                <span class="desc">民谣歌手、中国现代民谣的代表人物之一</span>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="https://p2.music.126.net/w_UWOls2uCkFN_U62788Xg==/18806046882229308.jpg?param=62y62" alt="">
              <div class="info">
                <h4 class="name">音乐人赵雷</h4>
                <span class="desc">民谣歌手</span>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="https://p2.music.126.net/mS2PtUF2F_x949tJHS5Kog==/109951166457235020.jpg?param=62y62" alt="">
              <div class="info">
                <h4 class="name">王三溥</h4>
                <span class="desc">音乐人</span>
              </div>
            </a>
          </li>
        </ul>
        <div class="singer-btn">
          <a href="#">
            <i>申请成为网易音乐人</i>
          </a>
        </div>
      </div>
      <div class="popular-anchor">
        <div class="title">
          <span>热门主播</span>
        </div>
        <ul class="anchor-list">
          <li><a href="#" class="item">
            <img src="https://p2.music.126.net/H3QxWdf0eUiwmhJvA4vrMQ==/1407374893913311.jpg?param=40y40" alt="">
            <div class="info">
              <span class="name">陈立</span>
              <span class="desc">心理学家、美食家陈立教授</span>
            </div>
          </a></li>
          <li><a href="#" class="item">
            <img src="https://p2.music.126.net/GgXkjCzeH4rqPCsrkBV1kg==/109951164843970584.jpg?param=40y40" alt="">
            <div class="info">
              <span class="name">刘维-Julius</span>
              <span class="desc">歌手、播客节目《维维道来》主理人</span>
            </div>
          </a></li>
          <li><a href="#" class="item">
            <img src="https://p2.music.126.net/JZRLszqLQ2edeCd07JoNRQ==/109951166943043252.jpg?param=40y40" alt="">
            <div class="info">
              <span class="name">莫非定律MoreFeel</span>
              <span class="desc">男女双人全创作独立乐团</span>
            </div>
          </a></li>
          <li><a href="#" class="item">
            <img src="https://p2.music.126.net/NHjNoFpLDEZ-3OR9h35z1w==/109951165825466770.jpg?param=40y40" alt="">
            <div class="info">
              <span class="name">碎嘴许美达</span>
              <span class="desc">脱口秀网络红人</span>
            </div>
          </a></li>
          <li><a href="#" class="item">
            <img src="https://p2.music.126.net/CpUdHPNvBvN7kebvL21TTA==/109951163676573083.jpg?param=40y40" alt="">
            <div class="info">
              <span class="name">银临Rachel</span>
              <span class="desc">古风音乐人</span>
            </div>
          </a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="footer">
    <div class="wrapper_02 footer_wrap">
      <div class="footer-left">
        <div class="left-top">
          <a href="#">服务条款</a>
          <span>|</span>
          <a href="#">隐私政策</a>
          <span>|</span>
          <a href="#">儿童隐私政策</a>
          <span>|</span>
          <a href="#">版权投诉指引</a>
          <span>|</span>
          <a href="#">联系我们</a>
          <span>|</span>
          <a href="#">广告合作</a>
          <span>|</span>
          <a href="#">廉政举报</a>
        </div>
        <div class="left-middle">
          <span>网易公司版权所有©1997-2022&nbsp;&nbsp;</span>
          <span>杭州乐读科技有限公司运营:&nbsp;&nbsp;</span>
          <a href="">浙网文[2021] 1186-054号</a>
        </div>
        <div class="left-bottom">
          <a href="">粤B2-20090191-18&nbsp;&nbsp;工业和信息化部备案管理系统网站</a>
          <a href="">&nbsp;&nbsp;浙公网安备 33010902002564号</a>
        </div>
      </div>
      <div class="footer-right">
        <div class="right-item item1">
          <a class="item-logo" href=""></a>
          <span class="item-desc"></span>
        </div>
        <div class="right-item item2">
          <a class="item-logo" href=""></a>
          <span class="item-desc"></span>
        </div>
        <div class="right-item item3">
          <a class="item-logo" href=""></a>
          <span class="item-desc"></span>
        </div>
        <div class="right-item item4">
          <a class="item-logo" href=""></a>
          <span class="item-desc"></span>
        </div>
        <div class="right-item item5">
          <a class="item-logo" href=""></a>
          <span class="item-desc"></span>
        </div>
      </div>
    </div>
  </div>
  <div class="back-top"></div>
  <div class="playbar">
    <div class="wrapper_02 playbar-wrap">
      <div class="btns">
        <a class="prev" href="" title="上一首(ctrl+←)">上一首</a>
        <a class="play" href="" title="播放/暂停(p)">播放/暂停</a>
        <a class="next" href="" title="下一首(ctrl+→)">下一首</a>
      </div>
      <div class="avatar">
        <img src="https://s4.music.126.net/style/web2/img/default/default_album.jpg" alt="">
        <a class="avatar-cover" href=""></a>
      </div>
      <div class="progress-bar">
        <div class="progress-roller"></div>
        <div class="progress-line"></div>
        <div class="progress-time">
          <span class="current-time">00:00 </span>
          <span class="total-time">/ 00:00</span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>